<template>
     <div id="eagleMapContainer" title="">
            <div id="eagleMap">
                <l-map ref="map" :center="options.center" :min-zoom="options.minZoom" :options="options" :crs="options.crs">
                    <!--<l-tile-layer :url="url"></l-tile-layer>-->
                    <l-marker v-for="profile in profiles" :lat-lng="profile.position" @click="change(profile)" :icon="defaultIcon">
                        <l-popup :content="profile.name + contentHTML"></l-popup>
                    </l-marker>
                    <l-marker :lat-lng="marker"></l-marker>
                </l-map>
            </div>
            <div id="tz" @mousedown="dragEagle">
                <div title="拖动调整大小" id="move_tz"></div>
            </div>
       </div>
</template>

<script>

    import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
    import axios from 'axios';

    export default {
        name: "eagleMap",
        projectId: 1,
        components: {
            LMap,
            LTileLayer,
            LMarker,
            LPopup
        },

        data () {  /*定义data property的地方*/
            return {
                projectId: 6,
                contentHTML: '<br><button id="btnCon">进入</button>',
                options:{
                    zoom:14,
                    center: [38.3602507353627, 114.019932746887],
                    minZoom: -11,
                    attributionControl: false
                },
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                marker: L.latLng(47.453220, -1.259482),

                defaultIcon: L.icon({
                    iconUrl: 'images/rsv.png',
                    //shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
                    iconSize:     [32, 32],
                    shadowSize:   [30, 30],
                    iconAnchor:   [16, 32],
                    shadowAnchor: [3, 6],
                    popupAnchor:  [0, -28]
                }),
                profiles: [{
                    name: '主坝',
                    position: [ 38.3215249548474, 114.00203704834],
                    id: 2
                    },{
                    name: '左岸新副坝',
                    position: [38.3602507353627, 114.019932746887],
                    id: 1
                }]
            }
        },  /*end of data()*/

        methods: {
            change(profile) {
                this.projectId = profile.id;
                console.log(this.projectId);
            },
            setEagleMap(){
                var _this = this;
                axios.get('',{}).then(function (response){

                }).catch(function (error){
                    console.log(error);
                });
            },
            dragEagle:function(e){
                var targetDiv= document.getElementById('eagleMapContainer'); //e.target.parentNode.parentNode;.children[0]

                //得到点击时该地图容器的宽高：
                var targetDivWidth=targetDiv.offsetWidth;
                var targetDivHeight=targetDiv.offsetHeight;

                var startX=e.clientX;
                var startY=e.clientY;

                var _this=this;

                document.onmousemove=function(e){
                    console.log('move');
                    e.preventDefault();
                    //得到鼠标拖动的宽高距离：取绝对值
                    var distX=Math.abs(e.clientX-startX);
                    var distY=Math.abs(e.clientY-startY);

                    //往右上方拖动：
                    if(e.clientX > startX && e.clientY < startY){
                        targetDiv.style.width=targetDivWidth+distX+'px';
                        targetDiv.style.height=targetDivHeight+distY+'px';
                    }
                    //往左下方拖动：
                    if (e.clientX < startX && e.clientY > startY) {
                        targetDiv.style.width=(targetDivWidth-distX)+'px';
                        targetDiv.style.height=(targetDivHeight-distY)+'px';
                    }

                    //设置最大最小范围：不能无限制缩放，影响体验
                    if(parseInt(targetDiv.style.width)>=300){
                        targetDiv.style.width=300+'px';
                    }
                    if(parseInt(targetDiv.style.width)<=150){
                        targetDiv.style.width=150+'px';
                    }

                    if(parseInt(targetDiv.style.height)>=300){
                        targetDiv.style.height=300+'px';
                    }
                    if(parseInt(targetDiv.style.height)<=150){
                        targetDiv.style.height=150+'px';
                    }
                }

                document.onmouseup=function(){
                    document.onmousemove=null;
                }
            }
        },
        mounted:function(){
            // L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            // }).addTo(this.$refs.map.mapObject);
            // // 地名标注
            // L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            // }).addTo(this.$refs.map.mapObject);

            // var _this = this;
            // /*地图的 弹框打开之前 事件*/
            // this.$refs.map.mapObject.on("popupopen", function(e){
            //     document.getElementById("btnCon").onclick = function(){
            //         //alert(_this.projectId);
            //         _this.$emit("sceneChange",_this.projectId);
            //     }
             // L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            // }).addTo(this.$refs.map.mapObject);
            // // 地名标注
            // L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
            //     subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            // }).addTo(this.$refs.map.mapObject);

            var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18});

            this.$refs.map.mapObject.addLayer(osm);
            var _this = this;
            /*地图的 弹框打开之前 事件*/
            this.$refs.map.mapObject.on("popupopen", function(e){
                document.getElementById("btnCon").onclick = function(){
                    //alert(_this.projectId);
                    _this.$emit("sceneChange",_this.projectId);
                }
            });}
    };/* end of export */

    //拖动鹰眼：



</script>

<style scoped>
#eagleMapContainer{
    bottom: 10px;
    z-index: 200;
    overflow: hidden;
    width: 220px;
    height: 150px;
}
#eagleMap {
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: 1000;
}
#tz{
    position: absolute;
    right: 1px;
    top: 1px;
    width: 28px;
    height: 28px;
    cursor: ne-resize;
    z-index: 200001;
    background-image: url("");

}
#tz:hover{
    background-color: #666;
    background-image: "./../../asset/images/arrow.png";
}
#move_tz{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 27px;
    height: 20px;
    cursor: ne-resize;
    z-index: 100;
    background-image: url("");
    background-position: 0px 0px;
}

</style>
